<template>
  <div>
    <!-- <Qrcode :url="url" /> -->
    <!-- <el-table id="tableau" :data="tableData" height="430" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button type="primary" @click="btn">导出</el-button>
    <el-button type="primary" @click="daYin">打印</el-button>-->
    <div>
      <input type="button" title="开启摄像头" value="开启摄像头" @click="getMedia(on)" />
      <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
      <canvas id="canvas" width="500px" height="500px"></canvas>
      <button id="snap" @click="takePhoto()">拍照</button>
      <input type="button" title="关闭摄像头" value="关闭摄像头" @click="getMedia(off)" />
    </div>
  </div>
</template>
<script>
// import Qrcode from './b.vue'
// import { getUrl } from '@/utils/getUrl.js'

export default {
  data: function() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      on: true,
      off: false,
      checkList: [],
      value: []
    }
  },
  created: function() {},
  mounted: function() {},
  methods: {
    // btn: function() {
    //   this.exportExcel(this.tableData, '数据导出表格')
    // },
    // // 导出excel表格
    // exportExcel(data, filename) {
    //   /* 如果没有导入xlsx组件则导入 */
    //   if (typeof this.$XLSX === 'undefined') this.$XLSX = require('xlsx')
    //   const ws = this.$XLSX.utils.json_to_sheet(data)
    //   const wb = this.$XLSX.utils.book_new()
    //   this.$XLSX.utils.book_append_sheet(wb, ws, 'People')
    //   this.$XLSX.writeFile(wb, filename + '.xlsx')
    // },
    // // 打印
    // daYin: function() {
    //   window.print()
    //   // window.open()
    // },
    getMedia(status) {
      const video = document.getElementById('video')
      // const video = document.getElementById('video')
      const constraints = {
        video: { width: 500, height: 500 },
        audio: false
      }
      const promise = navigator.mediaDevices.getUserMedia(constraints)
      if (promise) {
        promise
          .then(function(MediaStream) {
            var track = MediaStream.getTracks()
            video.srcObject = MediaStream
            video.play()
            if (!status) {
              track.forEach(item => {
                item.stop() // 关闭相机
              })
            }
          })
          .catch(function(PermissionDeniedError) {
            console.log(PermissionDeniedError)
          })
      }
    },
    takePhoto: function() {
      const video = document.getElementById('video')
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, 500, 500)
      canvas.toBlob(blob => {
        const newImg = document.createElement('img')

        const url = URL.createObjectURL(blob)

        newImg.onload = function() {
          // no longer need to read the blob so it's revoked
          URL.revokeObjectURL(url)
        }

        newImg.src = url
        // document.body.appendChild(newImg)
        console.log(newImg)
      })
      this.getMedia(false)
    }
  }
}
</script>

<style lang="scss" scoped>
#video {
  background-color: pink;
}
#canvas {
  background-color: blue;
}
</style>
